<template>
	<view class="my-page">
		<!-- #ifndef MP -->
		<!-- 头部空出间隙 -->
		<view class="status_bar"></view> <!-- #endif -->
		<!-- 头部用户信息 -->
		<view class="my-header">
			<view class="header-content space-between center">
				<view class="left row center">
					<image class="header-image" src="/static/login1.png"></image>
					<view v-if="true" class="header-info column"> <text class="nickname"> 梦学谷 </text> <text
							class="username"> 用户名：mengxuegu </text> </view>
					<view v-else class="header-info"> 请登录 </view>
				</view> <text class="iconfont icon-right"></text>
			</view>
		</view>
		<!-- 列表组件 -->
		<my-list :myList='myList'></my-list>
	</view>
</template>

<script>
	import myList from  '@/pages/mine/components/my-list.vue'
	import MyList from "@/mock/my-list-bar.js"
	export default {
		data() {
			return {
				myList: MyList() //我的页面动态数据
			}
		},
		methods: {

		},
		components:{
			myList
		}
	}
</script>

<style lang="scss">
	.status_bar {
		 height: calc(var(--status-bar-height) + 48px); 
		width: 100%;
		background-color: $mxg-color-primary;
	}

	.my-header {
		background-color: $mxg-color-primary;

		.header-content {
			padding: 50rpx 39rpx;
			background-color: #FFFFFF;
			border-radius: 30px 30px 0 0;
		}

		.left {
			.header-image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 60px;
			}

			.header-info {
				margin-left: 30rpx;

				.nickname {
					font-size: 39rpx;
					font-weight: 500;
				}

				.username {
					font-size: 33rpx;
					color: $mxg-text-color-grey;
				}
			}
		}
		}

		
</style>
